<template>
    <a-card :bordered='false' :active-tab-key='tabKey' :tab-list='tabList' @tabChange='key => setTabKey(key)'>
        <div v-show='tabKey == 1'>
            <Debug v-if='init' :fields='fields'></Debug>
        </div>
        <div v-show='tabKey == 2'>
            <template v-if='tabKey2Init'>
                <Detail :name='name' :describe='describe'></Detail>
            </template>
        </div>
        <!-- <div v-show='tabKey == 3'>
            <template v-if='tabKey3Init'>
                <BackTestList :id='strategyId' />
            </template>
        </div> -->

        <template #tabBarExtraContent>
            <router-link :to='"/strategy/backTest/" + strategyId'>回测列表</router-link>
        </template>
    </a-card>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import Debug from './Debug.vue'
    import Detail from './Detail.vue'
    //import BackTestList from './BackTestList.vue'
    import { strategyApi } from '@/api/strategy'
    import { useRoute } from 'vue-router'
    

    const $route = useRoute()
    
    const strategyId = Number($route.params.id)
    const init = ref(false)
    const tabKey = ref(1)
    const tabKey2Init = ref(false)
    const tabKey3Init = ref(false)
    const tabList = reactive([
      {
        key: 1,
        tab: '回测设置',
      },
      {
        key: 2,
        tab: '回测详情',
      },

    //   {
    //     key: 3,
    //     tab: '回测列表',
    //   },
    ]);

    const fields:any[] = []
    const name = ref('')
    const describe = ref('')
    function setTabKey(key) {
        tabKey.value = key
        if(key == 2 && tabKey2Init.value == false) {
            tabKey2Init.value = true
        }
        if(key == 3 && tabKey3Init.value == false) {
            tabKey3Init.value = true
        }
    }

    strategyApi(strategyId).then(res => {console.log(res)
        if(res.success) {
            res.data.attr.forEach(field => {
                fields.push(field)
            })
            name.value = res.data.name
            describe.value = res.data.describe
        }
        init.value = true
    })

</script>